/*
@功能：首页面js
@作者：diamondwang
@时间：2013年11月13日
*/

/* 注意，要在页面中先引入jquery*/
$(function () {
	//右侧，话费、旅行、彩票、游戏切换效果
	$(".service h2 span").mouseover(function () {
		$(this).addClass("on").siblings().removeClass("on");
		$(".service_wrap div").hide().eq($(this).index()).show();

	});

	//导购区域切换效果，疯狂抢购，热卖商品、推荐商品、新品上架，猜您喜欢
	$(".guide_content h2 span").mouseover(function () {
		$(this).addClass("on").siblings().removeClass("on");
		$(".guide_wrap div").hide().eq($(this).index()).show();

	});

	//各楼层区域切换
	$(".goodslist h2 span").mouseover(function () {
		$(this).addClass("on").siblings().removeClass("on");
		$(".goodslist_wrap div").hide().eq($(this).index()).show();

	});

	//首页幻灯片效果
	var len = $(".slide_items li").size(); //获取图片的数目
	var init = 1; //设置图片切换初始值，从第二张开始
	var dt = null; //设置定时器

	//定义一个函数完成动画
	function slide() {
		dt = setInterval(function () {
			//大图切换
			$(".slide_items li").stop(true, false).fadeOut().eq(init).fadeIn();
			//数字索引切换
			$(".slide_controls li").removeClass("on").eq(init).addClass("on");
			init++;
			if (init >= len) {
				init = 0;
			}
		}, 5000)
	}

	// function slide(){
	// 	if (init >= len ){
	// 		init = 0;
	// 	}
	// 	//大图切换
	// 	$(".slide_items li").fadeOut().eq(init).fadeIn();
	// 	//数字索引切换
	// 	$(".slide_controls li").removeClass("on").eq(init).addClass("on");
	// 	init++;

	// 	setTimeout("slide()",2000);
	// }

	//调用函数，实现动画
	slide();

	//鼠标放置在图片上则停止幻灯,离开则继续
	$(".slide_items li").mouseover(function () {
		clearInterval(dt);
	}).mouseout(function () {
		slide();
	});

	//鼠标放置到数字索引上时，立即切换到该图片上,并停止动画，离开则继续
	$(".slide_controls li").mouseover(function () {
		clearInterval(dt);
		init = $(this).index();
		$(".slide_items li").stop(true, false).fadeOut().eq(init).fadeIn();
		init++;
		$(this).addClass("on").siblings().removeClass("on");
	}).mouseout(function () {
		slide();
	});
});

// // tab选项卡
// tabApi('hot',1)
// $('./guide_content h2 span').mouseover(function(){
// 	// 获取span内容
// 	let spanIndex = $(this).index()
// 	let title = $(this).text()
// 	let titleEnglish = {'热卖商品':'hot','推荐商品':'best','新品上架':'new'}

// 	//判断发送请求
// 	tabApi(titleEnglish[title],spanIndex)
// })

$(function() {
	// 【### 一、商品分类  一级/二级 先URL 再关键词  三级 先URL 再分类ID
	$('.category .cat_bd').html('')
	$.get('http://kg.zhaodashen.cn/v1/category/index.jsp', {}, res => {
		// 遍历拼接数据
		let html = ``
		$.each(res.data, (index, menu) => {
			if (index>12) return
			// 一级
			html += `<div class="cat item1">`
				html += `<h3><a href="${menu.url ? menu.url : './list.html?k='+menu.keywords}">${menu.cat_name}</a> <b></b></h3>`
				html += `<div class="cat_detail">`
					// 二级
					$.each(menu.children, (index, menu2) => {
						html += `<dl class="dl_1st">`
							html += `<dt><a href="${menu2.url ? menu2.url : './list.html?k='+menu2.keywords}">${menu2.cat_name}</a></dt>`
							html += `<dd>`
								// 三级
								$.each(menu2.children, (index, menu3) => {
									html += `<a href="${menu3.url ? menu3.url : './list.html?cat='+menu3.cat_id}">${menu3.cat_name}</a>`
								})
							html += `</dd>`
						html += `</dl>`
					})
				html += `</div>`
			html += `</div>`
		})
		// 放到页面中
		$('.category .cat_bd').html(html)
	}, 'json')

	// 【### 二、热卖、推荐、新品
	// 2.1 首次异步请求
	getIndexGoods('hot') 
	// 2.2 切换异步请求
	$('.guide_content h2 span').mouseover(function(){
		let val = $(this).text()
		let type = ''
		if (val === '热卖商品') type = 'hot'
		if (val === '推荐商品') type = 'best'
		if (val === '新品上架') type = 'new'
		getIndexGoods(type)
	})
	// 热卖、推荐、新品封装请求函数
	function getIndexGoods(type)
	{
		// 留心：推荐页面class不是best而是recommend
		let className = type === 'best' ? 'recommend' : type
		
		// 显示loading
		$(`.guide_wrap .${className} ul`).html(`<li><img height="200" src="./imgs/loading" /></li>`)

		// 发送请求
		$.get('http://kg.zhaodashen.cn/v1/goods/index.jsp', {type}, res => {
			// 遍历拼接数据
			let html = `` 
			$.each(res.data.list, (index, item) => {
				html += `
					<li>
						<dl>
							<dt><a href="./goods.html?id=${item.goods_id}"><img src="http://tmp00001.zhaodashen.cn/${item.goods_img}" alt="" /></a></dt>
							<dd><a href="./goods.html?id=${item.goods_id}">${item.goods_name}</a></dd>
							<dd><span>售价：</span><strong> ￥${item.shop_price}</strong></dd>
						</dl>
					</li>
				`
			})
			// 放到页面中   
			$(`.guide_wrap .${className} ul`).html(html)
		}, 'json')
	}

	// 【### 三、猜你喜欢
	// 显示loading
	$(`.floor1 .goodslist div:first`).html(`<img height="400" src="./imgs/loading" />`)
	// 发送请求
	$.get('http://kg.zhaodashen.cn/v1/goods/like.jsp', {}, res => {
		// 遍历拼接数据
		let html = `` 
		$.each(res.data, (index, item) => {
			html += `
				<li>
					<dl>
						<dt><a href="./goods.html?id=${item.goods_id}"><img src="http://tmp00001.zhaodashen.cn/${item.goods_img}" alt="" /></a></dt>
						<dd><a href="./goods.html?id=${item.goods_id}">${item.goods_name}</a></dd>
						<dd><span>售价：</span><strong> ￥${item.shop_price}</strong></dd>
					</dl>
				</li>
			`
		})
		// 放到页面中   
		$(`.floor1 .goodslist div:first`).html(`<ul>${html}</ul>`)
	}, 'json')
})
